{% extends "Super.tpl" %}
{% block title %}在线Java考试系统{% endblock %}
{%block subtitle%}在线Java考试{%endblock%}
{%block suburl%}#{%endblock%}
{%block rightsubtitle%}摄像头监控已开启,请您遵守考试规则{%endblock%}
{% block content %}
<video id="video" width="150" height="150" style="right:0px;position: fixed;z-index: 999"></video>
<style>
	.myradio {
		width: 20px;
		top: 2px;
		position: relative;

	}
</style>
<script type="text/javascript" src="static/js/exam.js"></script>
<div class="container-fluid">
	<div class="side-body padding-top">
		<div class="card-body" style="position:fixed;z-index:99;left: 20%;width: 60%;">
			<div class="modal-active" id="memo" style="display: block;">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<h4 class="modal-title">温馨提示</h4>
						</div>
						<div class="modal-body">
							<div class="form-group">
								<h4 id="reason">
								{{memo}}
								</h4>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" id="memoclose" class="btn btn-primary">确定</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="card-body" style="position:fixed;z-index:99;left: 20%;width: 60%;">
			<div class="modal-active" id="tips" style="display: none;">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
									aria-hidden="true" id="miniclose">×</span>
							</button>
							<h4 class="modal-title">提交试卷</h4>
						</div>
						<div class="modal-body">
							<div class="form-group">
								<h3>点击确定提交试卷,该操作不可恢复,提交前请确保你已完成答题</h3>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-primary" style="display: none"></button>
							<button type="button" class="btn btn-default" id="examnotover">取消</button>
							<button type="button" class="btn btn-primary" id="examover">确定</button>

						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="card-body" style="position:fixed;z-index:99;left: 20%;width: 60%;">
			<div class="modal-active" id="result" style="display: none;">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
									aria-hidden="true" id="miniclose">×</span>
							</button>
							<h4 class="modal-title">考试结果</h4>
						</div>
						<div class="modal-body">
							<div class="form-group" align="center">
								<h5>考试得分:</h5>
								<h1 style="color: blue" id="point">...</h1>
								<h4 id="resultstr">...</h4>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-primary" style="display: none"></button>
							<button type="button" class="btn btn-primary" id="sure">确定</button>

						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="card-body">
			<div class="row">
				<div class="col-xs-6 col-md-2">
					<div class="card" style="height: 450px;overflow: auto ;">
						<div class="card-header">
							<div class="card-title">
								<div class="title" id="">信息</div>
							</div>
							<div class="card-profile-img">
								<img src="{{info.Image}}">
							</div>
							<div class="card-body">
								<div class="card-info">
									<p>姓名: <span class="info">{{info.Name}}</span></p>
									<p>身份证: <span class="info">{{info.Ident}}</span></p>
									<p>倒计时:<span id="timecount" style="color: red;font-size: larger;">45分钟</span></p>
								</div>
							</div>
						</div>

					</div>
				</div>
				<div class="col-xs-8 col-md-7">
					<div class="card" style="height: 450px;overflow: auto;">
						<div class="card-header">
							<div class="card-title">
								<div class="title" id="question">考题区</div>
							</div>
						</div>
						<div class="modal-body" id="optionarea">
						</div>
						<div class="modal-footer" style="position: absolute;bottom: 0px;right: 0px;">
							<div class="pull-right card-action">
								<div class="btn-group" role="group">
									<button type="button" disabled class="btn btn-primary" onclick="lastquestion()"
									        style="font-weight: bold;color: whitesmoke;">回答正确会自动进入下一题,回答错误会给出错误原因
									</button>
								</div>
								<div class="btn-group" role="group">
									<button type="button" class="btn btn-info" onclick="lastquestion()"
									        style="font-weight: bold;color: whitesmoke;">上一题
									</button>
								</div>
								<div class="btn-group" role="group">
									<button type="button" class="btn btn-info" onclick="nextquestion()"
									        style="font-weight: bold;color: whitesmoke;">下一题
									</button>
								</div>
								<div class="btn-group" role="group">
									<button type="button" class="btn btn-info" onclick="jump()"
									        style="font-weight: bold;color: whitesmoke;">跳过
									</button>
								</div>
								<div class="btn-group" role="group">
									<button type="button" class="btn btn-info" id="takeoff"
									        style="font-weight: bold;color: whitesmoke;">提交答题
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>


				<div class="col-xs-8 col-md-3">
					<div class="card" style="height: 450px;overflow: auto;" id="cccc">
						<div class="card-header">
							<div class="card-title">
								<div class="title" id="question">答题卡</div>
							</div>
						</div>
						<div class="card-body">
							{% for i in list %}
							<button style="width: 40px;height: 40px;" class="btn btn-default option"
							        value="{{forloop.Counter0}}">
                            {{forloop.Counter}}
							</button>
							{% endfor %}
						</div>
						<div class="card-footer">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="modal-footer">
			<div class="card-body">
				<div class="row no-margin">
					<div class="col-sm-12">
						<div class="card profile">
							<div class="" align="center">
								<img id="questionimage" src="" style="width: 30%">
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


{% endblock %}
